﻿@using BlazorComponent.I18n
@namespace ChatGpt.Shared

@inject ChatGptJsInterop ChatGptJsInterop
@inject I18n I18n

<div id="content" style="@(ChatGptOptions.Dark ? "background-color: #363636;" : "background-color: ghostwhite;")">
    @if (Messages != null)
    {
        @foreach (var item in Messages)
        {
            <div style="@(ChatGptOptions.Dark ? "background-color: #363636;" : "background-color: ghostwhite;")">
                @if (item.ChatGpt)
                {
                    <MCardTitle>
                        <MAvatar>
                            <MImage Src="@(string.IsNullOrEmpty(ChatGptOptions?.ChatGptAvatar) ? "https://blog-simple.oss-cn-shenzhen.aliyuncs.com/chatgpt.ico" : ChatGptOptions.ChatGptAvatar)" Alt="Jack"></MImage>
                        </MAvatar>
                    </MCardTitle>
                }
                else
                {
                    <MCardTitle>
                        <MAvatar>
                            <MImage
                                Src="@(string.IsNullOrEmpty(ChatGptOptions?.Avatar) ? "https://blog-simple.oss-cn-shenzhen.aliyuncs.com/Avatar.jpg" : ChatGptOptions.Avatar)" Alt="Jack">
                            </MImage>
                        </MAvatar>
                    </MCardTitle>
                }
                <MCardText>
                    <MCard Dark="ChatGptOptions.Dark" MinHeight="20" Class="container" Outlined>
                        <MButton Height="20" Icon OnClick="async () => await OnCopy.InvokeAsync(item)" Class="top-button">
                            <MIcon Small>mdi-content-copy</MIcon>
                        </MButton>
                    <MMarkdownIt Style="margin: 25px 5px 5px 7px; min-height: 5px" Source="@item.Content" Class="markdown-parser__basic" />
                    </MCard>
                </MCardText>
            </div>
        }
    }
</div>

<style>
    .m-navigation-drawer__content::-webkit-scrollbar {
        width: 0 !important;
    }

    .message {
        margin: 5px;
    }

    .m-sheet.m-card:not(.m-sheet--outlined) {
        box-shadow: none !important;
    }

    .markdown-parser__basic img {
        max-width: 100%;
    }

    .markdown-parser__basic blockquote {
        border-left: 4px lightgray solid;
        padding-left: 16px;
    }

    html {
        overflow-y: auto;
    }

    .container {
        position: relative;
        padding:5px !important;
    }

    .top-button {
        position: absolute;
        top: 0;
        right: 0;
        margin: 5px;
    }
</style>